import { Component } from '../../components/base-component';
import { Button } from '../../components/button';
import { Form } from './form/form-template';
import './garage.css';
import {
  buttonNextState,
  buttonPrevState,
  carCount,
  maxPage,
  pageCounter,
  removingModal,
  updateCarConfigs,
} from '../../utilities/observable';
import { NavigationButtons } from '../navigation/nav-buttons';
import { updateCar } from '../../api/api-garage-service';
import { CarListComponent } from './car-list/car-list-component';

export class Garage extends Component {
  private formCreate = new Form('Create');

  private formUpdate = new Form('Update');

  private buttonRace = new Button({ className: 'button', text: 'Race' });

  private buttonReset = new Button({ className: 'button', text: 'Reset' });

  private buttonGenerate = new Button({
    className: 'button',
    text: 'Generate Cars',
  });

  private title = new Component({
    tag: 'h1',
    className: 'garage__title',
    text: 'Garage',
  });

  private pageNumber = new Component({
    tag: 'h2',
    className: 'garage__page',
    text: 'Page',
  });

  private cars = new CarListComponent();

  private paginationContainer = new Component({ className: 'garage__pagination' });

  private buttonPrev = new Button({ className: 'button', text: 'Prev' });

  private buttonNext = new Button({ className: 'button', text: 'Next' });

  constructor() {
    super({ tag: 'div', className: 'garage__wrapper' });
    const navigation = new NavigationButtons(false);
    const wrapperButtons = new Component({ className: 'wrapper-buttons' });

    this.formCreate.formSubmit((e: Event) => {
      e.preventDefault();
      this.cars.createOneCar({
        name: this.formCreate.getInputsValue().name,
        color: this.formCreate.getInputsValue().color,
      });
    });

    buttonNextState.subscribe((state) => {
      this.buttonNext.setDisabledState(state);
    });

    buttonPrevState.subscribe((state) => {
      this.buttonPrev.setDisabledState(state);
    });

    this.buttonPrev.addListener('click', () => {
      pageCounter.notify((page) => {
        return page - 1;
      });
      removingModal.notify(() => {
        return true;
      });
      this.cars.createCarsPerPage();
    });

    this.buttonNext.addListener('click', () => {
      pageCounter.notify((page) => {
        return page + 1;
      });
      removingModal.notify(() => {
        return true;
      });
      this.cars.createCarsPerPage();
    });

    this.buttonGenerate.addListener('click', () => {
      this.cars.generateCars();
    });

    this.buttonRace.addListener('click', () => {
      this.cars.raceAllCars();
    });

    this.buttonReset.addListener('click', () => {
      this.cars.toInitialState();
    });

    updateCarConfigs.subscribe((id) => {
      this.formUpdate.formSubmit(async () => {
        await updateCar(
          id,
          this.formUpdate.getInputsValue().name,
          this.formUpdate.getInputsValue().color
        );
      });
    });
    this.pageNumber.setTextContent(`Page 1`);
    pageCounter.subscribe((value) => {
      this.pageNumber.setTextContent(`Page ${Math.min(Math.max(value, 1), maxPage.getValue())}`);
    });

    carCount.subscribe((count) => {
      this.title.setTextContent(`Garage: ${count}`);
    });

    this.paginationContainer.appendChildren([this.buttonPrev, this.buttonNext]);

    wrapperButtons.appendChildren([this.buttonRace, this.buttonReset, this.buttonGenerate]);
    this.appendChildren([
      navigation,
      this.formCreate,
      this.formUpdate,
      wrapperButtons,
      this.title,
      this.pageNumber,
      this.cars,
      this.paginationContainer,
    ]);
  }
}
